<template>
  <view class="cash_flow">
    <view class="header">
      <text class="title">现金流水</text>
      <button class="add-button" @click="goToAdd">新增</button>
    </view>
    <view class="list-container">
      <view v-for="record in cashFlowRecords" :key="record.flow_id" @click="viewDetail(record.flow_id)" class="record-item">
        <view class="record-header">
          <text :class="['type-badge', getTypeClass(record.flow_type)]">
            {{ getTypeText(record.flow_type) }}
          </text>
          <text :class="getAmountClass(record.amount)">
            {{ formatAmount(record.amount) }}
          </text>
        </view>
        <view class="record-details">
          <view class="detail-row">
            <text class="label">渠道:</text>
            <text class="value">{{ record.channel }}</text>
          </view>
          <view class="detail-row">
            <text class="label">手续费:</text>
            <text class="value">{{ record.fee }}</text>
          </view>
          <view class="detail-row">
            <text class="label">时间:</text>
            <text class="value">{{ formatDate(record.created_at) }}</text>
          </view>
          <view v-if="record.note" class="detail-row">
            <text class="label">备注:</text>
            <text class="value note">{{ record.note }}</text>
          </view>
        </view>
      </view>
      <view v-if="cashFlowRecords.length === 0" class="no-data">
        暂无数据
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { get } from '../../utils/api'

const router = useRouter()

// 定义现金流水记录类型
interface CashFlowRecord {
  flow_id: number
  asset_id: number | null
  flow_type: string
  amount: number
  channel: string
  fee: number
  created_at: string
  note: string | null
}

// 状态管理
const cashFlowRecords = ref<CashFlowRecord[]>([])

// 获取类型文本
const getTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    'fiat_in': '法币入金',
    'fiat_out': '法币出金',
    'deposit': '充值',
    'withdraw': '提现'
  }
  return typeMap[type] || type
}

// 获取类型样式类
const getTypeClass = (type: string) => {
  const classMap: Record<string, string> = {
    'deposit': 'deposit',
    'withdraw': 'withdraw',
    'fiat_in': 'fiat-in',
    'fiat_out': 'fiat-out'
  }
  return classMap[type] || ''
}

// 获取金额样式类
const getAmountClass = (amount: number) => {
  return amount >= 0 ? 'amount-positive' : 'amount-negative'
}

// 格式化金额
const formatAmount = (amount: number) => {
  return amount >= 0 ? `+${amount}` : `${amount}`
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取现金流水数据
const fetchCashFlowData = async () => {
  try {
    console.log('开始获取现金流水数据...')
    const response = await get('/api/cash-flow')
    console.log('现金流水数据响应:', response)
    const result = response.data
    
    if (result.success) {
      cashFlowRecords.value = result.data
      console.log('成功获取现金流水数据:', result.data)
    } else {
      console.error('获取现金流水数据失败:', result.error)
    }
  } catch (error) {
    console.error('获取现金流水数据时发生错误:', error)
  }
}

// 跳转到新增页面
const goToAdd = () => {
  router.push('/pages/cashflow/add')
}

// 查看详情
const viewDetail = (flowId: number) => {
  router.push({
    path: '/pages/cashflow/detail',
    query: { id: flowId.toString() }
  })
}

// 组件挂载时获取数据
onMounted(() => {
  fetchCashFlowData()
})
</script>

<style scoped>
.cash_flow {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 12px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 8px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.add-button {
  background-color: #1989fa;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}

.add-button:active {
  background-color: #096dd9;
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-item {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.record-item:active {
  background-color: #f9f9f9;
  transform: scale(0.99);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.type-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.deposit {
  background-color: #e8f5e9;
  color: #4caf50;
}

.type-badge.withdraw {
  background-color: #ffebee;
  color: #f44336;
}

.type-badge.fiat-in {
  background-color: #e3f2fd;
  color: #2196f3;
}

.type-badge.fiat-out {
  background-color: #fff3e0;
  color: #ff9800;
}

.amount-positive {
  color: #4caf50;
  font-weight: 600;
  font-size: 16px;
}

.amount-negative {
  color: #f44336;
  font-weight: 600;
  font-size: 16px;
}

.record-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
}

.label {
  color: #999;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 8px;
}

.value {
  color: #333;
  font-size: 14px;
  text-align: right;
  flex: 1;
  word-break: break-all;
}

.value.note {
  color: #666;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}
</style>